<template>
    <div>
        <v-btn
                height="40px"
                outlined
                color="warning"
                :disabled="disabled"
                @click="renameDialog = true"
        >
            重命名
        </v-btn>
        <v-dialog
                v-model="renameDialog"
                persistent
                overlay-opacity="0.2"
                max-width="400px"
        >
            <v-card outlined>
                <my-loading-overlay :loading-overlay="loadingOverlay"></my-loading-overlay>
                <v-card-title class="subtitle-1" style="border-bottom: 1px solid #d0dfe7">重命名</v-card-title>
                <v-card-text class="mt-8">
                    <v-text-field
                            ref="fileName"
                            outlined
                            label="新文件名"
                            v-model="newName"
                            class="mt-3"
                            dense
                            clearable
                            autofocus
                            :rules="[fileNameRule]"
                            @keydown.enter="rename()"
                    >
                    </v-text-field>
                </v-card-text>
                <v-card-actions>
                    <v-btn class="ml-10" width="130" color="primary" @click="rename()">重命名</v-btn>
                    <v-btn class="ml-10" width="130" color="warning" @click="reset()">取消</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>

</template>

<script>
    import {fileNameRule} from "../../../util/rule";
    import MyLoadingOverlay from "./MyLoadingOverlay";

    export default {
        name: "MyRenameBtn",
        components: {MyLoadingOverlay},
        data() {
            return {
                renameDialog: false,
                newName: '',
                loadingOverlay: false
            }
        },
        methods: {
            fileNameRule,
            reset() {
                this.$refs["fileName"].reset();
                this.renameDialog = false;
            },
            rename() {
                if (!this.$refs["fileName"].validate()) {
                    return;
                }
                // 拼接文件名
                let _this = this;
                _this.loadingOverlay = true;
                let file = _this.$store.state.selected[0];
                let completeName;
                if (file.type === 'folder') {
                    completeName = _this.newName;
                } else {
                    completeName = _this.newName + file.name.substring(file.name.lastIndexOf("."));
                }
                _this._put({
                    url: 'system/disk/rename',
                    data: {
                        newName: completeName,
                        originalName: file.name,
                        fid: file.id,
                        path: file.path,
                        type: file.type
                    }
                }).then((rsp) => {
                    if (rsp.data.code === '00000') {
                        _this.$emit("rename-success")
                        _this.reset();
                    } else {
                        _this.$error({message: rsp.data.msg})
                    }
                }).catch((error) => {
                    _this.$serverError();
                    console.log(error)
                }).finally(() => {
                    _this.loadingOverlay = false;
                })
            }
        },
        computed: {
            disabled() {
                return this.$store.state.selected.length !== 1;
            }
        }
    }
</script>

<style scoped>

</style>